<template>
    <div class="box-big" v-if="currentcom && currentcom.id === id" :style=" shapeAddPX(style) ">
        <el-icon class="xuan-icon">
            <RefreshRight />
        </el-icon>
        <!-- <div class="points" v-for=" item  in  currentcom ? points : [] " :key=" item.position " :style@mousedown=" onmousedown "
            :data-position=" item.position "></div> -->
        <div class="points top-left" @mousedown=" onmousedown "></div>
        <div class="points top" @mousedown=" onmousedown "></div>
        <div class="points top-right" @mousedown=" onmousedown "></div>
        <div class="points right" @mousedown=" onmousedown "></div>
        <div class="points bottom-right" @mousedown=" onmousedown "></div>
        <div class="points bottom" @mousedown=" onmousedown "></div>
        <div class="points bottom-left" @mousedown=" onmousedown "></div>
        <div class="points left" @mousedown=" onmousedown "></div>
    </div>

    <slot></slot>
</template>

<script setup lang="ts">
import { defineProps, reactive, watch, ref } from 'vue'//接收父组件穿过来的数据

import { RefreshRight } from '@element-plus/icons-vue'//导入pinia
import { storeToRefs } from 'pinia'
import { useComponents } from '../../../stores/counter'
import shapeAddPX from '../../../utils/setPx'
const { currentcom, canvasComponents } = storeToRefs(useComponents())
const { setStyle } = useComponents()
//导入封装单位
const { style, id }: any = defineProps(['style ', 'id'])//旋转图表
// 1/当前组件默认显示的数据
currentcom.value = canvasComponents.value.length ? canvasComponents.value[canvasComponents.value.length - 1]
const onmousedown = (event: any) => {
    event.preventDefault()
    event.stopPropagation()//记录按下哪个点
    const currentHandle = event.target;
    const direction = currentHandle.className.split("")[1]//记录初始坐标
    const startX = event.clientx; const startY = event.clientY;//获取初始宽度和高度
    const startwidth = currentcom.value.style.width; const startHeight = currentcom.value.style.height;//获取left和top值
    const startLeft = currentcom.value.style.left; const startTop = currentcom.value.style.top;
    document.addEventListener(' mousemove ', resize);
    document.addEventListener(' mouseup ', onmouseup);

    function resize(event: any) {
        //移动距离
        const dx = event.clientx - startX;
        const dy = event.clientY - startY;
        let width = startwidth;
        let height = startHeight;
        let left = startLeft;
        let top = startTop;//左边移动后宽度增大
        if (direction.includes("left"))
            width = startwidth - dx + 'px';
        left = startLeft + dx / 2 + 'px';
        if (direction.includes('right'))
            width = startwidth + dx + 'px'
        left = startLeft + dx / 2 + 'px ';
        if (direction.includes("top"))
            height = startHeight - dy + "px";
        top = startTop + dy / 2 + "px";

        if (direction.includes("bottom")) {
            height = startHeight + dy + "px";
            top = startTop + dy / 2 + "px";
            let endw = dx
            let endH = dy
            if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
            setStyle(currentcom.value.id, 'width ', endw)
            setStyle(currentcom.value.id, 'height', endH)
        }
    }
    function onmouseup() {
        document.removeEventListener(' mousemove', resize)
        document.removeEventListener(' mouseup', onmouseup)

    }

}
</script>
<style scoped>
.box-big {
    position: absolute;
    border: 2px solid #c68bf2 !important;
}

.xuan-icon {
    position: absolute;
    top: -35px;
    left: 50%;
    cursor: pointer;
    transform: translatex(-50%);
    font-size: 32px;
}

.points {
    width: 6px;
    height: 6px;
    position: absolute;
    border: 2px solid #c60bf2;
    border-radius: 50%;
}

.top-left {
    top: -6px;
    left: -3px;
    cursor: nw-resize;
}

.top {
    top: -6px;
    left: calc(50% - 3px);
    cursor: ns-resize;
}

.top-right {
    top: -6px;
    right: -5px;
    cursor: ne-resize;
}

.right {
    top: calc(50% - 3px);
    right: -5px;
    cursor: ew-resize;
}

.bottom-right {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.bottom {
    bottom: -6px;
    left: calc(50% - 3px);
    cursor: ns-resize;
}

.bottom-left {
    bottom: -6px;
    left: -5px;
    cursor: sw-resize;
}

.left {
    top: calc(50% - 5px);
    left: -6px;
    cursor: ew-resize;
}
</style>
